/* eslint-disable semi */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Progress } from 'antd';
import { Statistics } from '@/models/connect';
import styles from './deviceStatistics.css';
import { produce, Draft } from 'immer';
import router from 'umi/router';
import CommList from './commList';
import { infosDevice, infosDeviceCounts, infosDevices } from '@/services/statistics';
import { deviceGetLine, deviceGetColumnar, deviceGetGaugeCategories } from '@/utils/echarts';
import { isMenuVisible } from '@/utils/utils';

import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
import { declareFunction } from '@babel/types';

interface DeviceStatisticsProps {
  statistics?: Statistics;
  loading: boolean;
  infosDeviceData: any;
  infosCountsData: any;
}

class DeviceStatistics extends Component<DeviceStatisticsProps> {
  constructor(props: DeviceStatisticsProps) {
    super(props);
    this.state = {
      visible: true,
      infosDeviceData: [],
      infosDevicesData: [],
    };
  }
  infosData = async () => {
    const [err, data] = await infosDevice();
    if (!err) {
      this.setState(
        produce((draft: Draft<DeviceStatisticsProps>): void => {
          draft.infosDeviceData = data;
        }),
      );
    }
  };
  infosCounts = async () => {
    const [err, data] = await infosDevices();
    if (!err) {
      this.setState(
        produce((draft: Draft<DeviceStatisticsProps>): void => {
          console.log(data);
          draft.infosDevicesData = data;
        }),
      );
    }
  };
  componentWillMount() {
    this.infosData();
    this.infosCounts();
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/infosDeviceCounts' });
    // dispatch({ type: 'statistics/deviceDetailReturn', payload:'true' });
  }

  render() {
    const { infosCountsData = [] } = this.props;
    let normal = '';
    let abnormal = '';
    let total = '';
    console.log(this.props.returnData);
    infosCountsData.forEach(item => {
      if (item.name === '正常') {
        normal = JSON.stringify(infosCountsData) !== '[]' ? item.value : 0;
      } else if (item.name === '异常') {
        abnormal = JSON.stringify(infosCountsData) !== '[]' ? item.value : 0;
      } else {
        total = JSON.stringify(infosCountsData) !== '[]' ? item.value : 0;
      }
    });
    const dataC = [
      { name: '2019-12-12', value: '23' },
      { name: '2019-12-13', value: '43' },
      { name: '2019-12-14', value: '43' },
      { name: '2019-12-15', value: '65' },
      { name: '2019-12-16', value: '34' },
      { name: '2019-12-17', value: '54' },
      { name: '2019-12-17', value: '54' },
    ];
    const dataPie = this.state.infosCountsData;
    // console.log('啊实打实');
    return this.props.returnData === 'true' &&
      isMenuVisible('iot:deviceMonitorAnalyze:infosDevices') ? (
      <div className={styles.deviceStatistics}>
        <div className={styles['deviceStatistics-Box']}>
          <div className={styles['deviceStatistics-Box-left']}>
            <div className={styles['echartsTtile']}>
              <p>设备统计分析</p>
            </div>
            <div className={styles['echartspieBox']}>
              <ReactEcharts option={deviceGetGaugeCategories(infosCountsData)} />
              <div className={styles['echartspie']} />
              <div className={styles['echartspieTotal']}>
                <p>{total}</p>
                <span>设备总数</span>
              </div>
            </div>
            <div className={styles['echartsText']}>
              <p>
                正常设备<span>{normal}</span>
              </p>
              <p>
                异常设备<span>{abnormal}</span>
              </p>
            </div>
          </div>
          <div className={styles['deviceStatistics-Box-right']}>
            <div className={styles['deviceStatistics-Box-top']}>
              <div className={styles['echartsTtile']}>
                <p>近12月设备统计分析</p>
              </div>
              <div className={styles['echartsline']}>
                <ReactEcharts option={deviceGetLine(this.state.infosDeviceData)} />
              </div>
            </div>
            <div className={styles['deviceStatistics-Box-bottom']}>
              <div className={styles['echartsTtile']}>
                <p>近七日设备运行状态分析</p>
              </div>
              <div className={styles['echartsColumnar']}>
                <ReactEcharts option={deviceGetColumnar(this.state.infosDevicesData)} />
              </div>
            </div>
          </div>
        </div>
        {isMenuVisible('iot:statistical:selectByInfo') && (
          <div
            className={styles['change-box']}
            onClick={() => {
              const { dispatch } = this.props;
              dispatch({ type: 'statistics/deviceDetailReturn', payload: 'false' });
            }}
          >
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList />
    );
  }
}

export default connect(({ loading, statistics }: Statistics) => ({
  loading: loading.effects['statistics/infosDeviceCounts'],
  infosCountsData: statistics.infosCountsData,
  returnData: statistics.returnData,
}))(DeviceStatistics);
